<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<head>
    <meta charset="UTF-8">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>        
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <style>
        .dropdown-menu>li
        {	
            position:relative;
            -webkit-user-select: none; /* Chrome/Safari */        
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE10+ */
            /* Rules below not implemented in browsers yet */
            -o-user-select: none;
            user-select: none;
            cursor:pointer;
        }

        .dropdown-menu .sub-menu 
        {
            left: 100%;
            position: absolute;
            top: 0;
            display:none;
            margin-top: -1px;
            border-top-left-radius:0;
            border-bottom-left-radius:0;
            border-left-color:#fff;
            box-shadow:none;
        }

        .right-caret:after,.left-caret:after
        {	
            content:"";
            border-bottom: 5px solid transparent;
            border-top: 5px solid transparent;
            display: inline-block;
            height: 0;
            vertical-align: middle;
            width: 0;
            margin-left:5px;
        }

        .right-caret:after
        {
            border-left: 5px solid #ffaf46;
        }

        .left-caret:after
        {
            border-right: 5px solid #ffaf46;
        }
    </style>
</head>
<body class="container">
    <h1>Sistemas de Ventas Y Control de Stock </h1>
    <nav class="navbar navbar-default" role="navigation">
        <div class="dropdown navbar-left" style="position:relative">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Ventas<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="<c:url value="/NuevaVenta"/>">Nueva Venta</a></li>
                <li><a href="<c:url value="/Ventas/AnularVenta.jsp"/>">Anular</a></li>
                <li><a href="<c:url value="/Ventas/DetalleVentas.jsp"/>">Detalle Venta</a></li>
                <li> 
                    <a class="trigger right-caret">Caja</a>
                    <ul class="dropdown-menu sub-menu">
                        <c:if test="${CAJA.montoInicial == null}">    
                            <li><a href="<c:url value="/Ventas/Caja.jsp"/>">Nueva Caja</a></li>                 
                            </c:if>
                            <c:if test="${CAJA.montoInicial > 0}">
                            <li><a href="<c:url value="/Informes/DetalleCaja.jsp"/>">Estado Caja</a></li>                 
                            </c:if>
                        <li><a href="<c:url value="/CajasPorUsuario"/>">Cajas Por Usuario</a></li>
                    </ul>
                </li>
                <li> 
                    <a class="trigger right-caret">Ajustes</a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="<c:url value="/NuevoAjuste"/>">Nuevo Ajuste</a></li>                 
                        <li><a href="<c:url value="/ListarAjustes"/>">Listar Ajustes</a></li>
                    </ul>
                </li>

            </ul>    
        </div>
        <div class="dropdown navbar-left" style="position:relative">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Gastos<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="<c:url value="/ListarGastos"/>">Listar</a></li>
                    <c:if test="${CAJA.montoInicial != null}">    
                    <li><a href="<c:url value="/Gastos/formNewGasto.jsp"/>">Nuevo Gasto</a></li>
                    </c:if>
                <li><a href="<c:url value="/GastosPorUsuario"/>">Gastos Por Usuario</a></li>
            </ul>    
        </div>


        <div class="dropdown navbar-left" style="position:relative">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Productos<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="<c:url value="/Productos/formConsultarProducto.jsp"/>">Consultar</a></li>
                <li><a href="<c:url value="/Admin/Productos/formNewProducto.jsp"/>">Insertar</a></li>
                <li><a href="<c:url value="/Admin/Productos/formModificarProducto.jsp"/>">Modificar</a></li>
                <li><a href="<c:url value="/Admin/Productos/formEliminarProducto.jsp"/>">Eliminar</a></li>
            </ul>    
        </div>

        <div class="dropdown navbar-left" style="position:relative">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Facturas<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="<c:url value="/NuevaFactura"/>">Ingresar</a></li>
                <li><a href="<c:url value="/Facturas/formConsultarFactura.jsp"/>">Consultar</a></li>
                <li><a href="<c:url value="/Admin/Facturas/formEliminarFactura.jsp"/>">Eliminar</a></li>
            </ul>
        </div>

        <div class="dropdown navbar-left" style="position:relative">		
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Categorías<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="<c:url value="/Admin/Categorias/formNewCategoria.jsp"/>">Insertar</a></li>
                <li><a href="<c:url value="/Admin/Categorias/formModificarCategoria.jsp"/>"/>Modificar</a></li>
                <li><a href="<c:url value="/Admin/Categorias/formEliminarCategoria.jsp"/>">Eliminar</a></li>
            </ul>
        </div>

        <div class="dropdown navbar-left" style="position:relative">		
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Proveedores<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="<c:url value="/Admin/Proveedores/formNewProveedor.jsp"/>">Insertar</a></li>
                <li><a href="<c:url value="/Proveedores/formConsultarProveedor.jsp"/>">Consultar</a></li>
                <li><a href="<c:url value="/Admin/Proveedores/formModificarProveedor.jsp"/>">Modificar</a></li>
                <li><a href="<c:url value="/Admin/Proveedores/formEliminarProveedor.jsp"/>">Eliminar</a></li>
            </ul>
        </div>

        <div class="dropdown navbar-left" style="position:relative">		
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Usuarios<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="<c:url value="/ListarUsuarios"/>"/>Listar</a></li>
                <li><a href="<c:url value="/Admin/Usuarios/formNewUsuario.jsp"/>"/>Insertar</a></li>
                <li><a href="<c:url value="/Admin/Usuarios/formModificarUsuario.jsp"/>"/>Modificar</a></li>
                <li><a href="<c:url value="/Admin/Usuarios/formEliminarUsuario.jsp"/>"/>Eliminar</a></li>
            </ul>
        </div>

        <div class="dropdown navbar-left" style="position:relative">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Informes<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="<c:url value="/ListarStock"/>">Stock </a></li>
                <li><a href="<c:url value="/StockBajos"/>">Bajos Stock</a></li>

                <li><a href="<c:url value="/ListarProducto?LISTAR_POR_CATEGORIA"/>">Prod. Ord. Categoría</a></li>	   
                <li> 
                    <a class="trigger right-caret">Mas Vendidos</a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="<c:url value="/MasVendidos"/>">TOP TEN DEL MES</a></li>                 
                        <li><a href="<c:url value="/Admin/Informes/InformeVentas/MasVendidosEntreFechas.jsp"/>">Entre fechas</a></li>
                    </ul>
                </li>
                <li> 
                    <a class="trigger right-caret">Ventas</a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="<c:url value="/Admin/Informes/InformeVentas/VentasDiarias.jsp"/>">Diarias</a></li>                 
                        <li><a href="<c:url value="/VentasPorUsuario"/>">Por Usuario</a></li>
                        <li><a href="<c:url value="/Admin/Informes/InformeVentas/VentasEntreFechas.jsp"/>">Entre fechas</a></li>
                    </ul>
                </li>
                <li>
                    <a class="trigger right-caret">Listados</a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="<c:url value="/ListarProducto"/>">Productos</a></li>
                        <li><a href="<c:url value="/ListarFacturas"/>">Facturas</a></li>
                        <li><a href="<c:url value="/ListarUsuarios"/>">Usuarios</a></li>
                        <li><a href="<c:url value="/ListarProveedores"/>">Proveedores</a></li>
                        <li><a href="<c:url value="/ListarAjustes"/>">Ajustes</a></li>
                        <li><a href="<c:url value="/ListarBoletas"/>">Ventas</a></li>
                        <li><a href="<c:url value="/ListarCajas"/>">Cajas</a></li>
                        <li><a href="<c:url value="/ListarCategoria?LISTAR=1"/>">Categorías</a></li>
                    </ul>
                </li>
            </ul>       
        </div>

        <div class="dropdown navbar-right" style="position:relative">		
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">${USUARIO.nombre}<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="<c:url value="/Usuarios/CambiarClave.jsp"/>">Cambiar Clave</a></li>
                    <c:if test="${CAJA.montoInicial > 0}">

                    <li><a href="<c:url value="/FinalizarCaja"/>">Finalizar Caja ($ ${CAJA.montoFinal})</a></li>
                    </c:if>
                <li><a href="<c:url value="/Finalizar"/>"/>Logout</a></li>	   
            </ul>

        </div>	
    </nav>
    <script>
        $(function() {
            $(".dropdown-menu > li > a.trigger").on("click", function(e) {
                var current = $(this).next();
                var grandparent = $(this).parent().parent();
                if ($(this).hasClass('left-caret') || $(this).hasClass('right-caret'))
                    $(this).toggleClass('right-caret left-caret');
                grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
                grandparent.find(".sub-menu:visible").not(current).hide();
                current.toggle();
                e.stopPropagation();
            });
            $(".dropdown-menu > li > a:not(.trigger)").on("click", function() {
                var root = $(this).closest('.dropdown');
                root.find('.left-caret').toggleClass('right-caret left-caret');
                root.find('.sub-menu:visible').hide();
            });
        });
    </script>	

</body>